<%@ page import="com.boxing.utils.WebUtil" %>
<%@ page import="com.boxing.bean.User" %><%--
  Created by IntelliJ IDEA.
  User: sxjzit001
  Date: 2023/5/6
  Time: 16:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>

  <head>
    <title>首页</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
    <style>
      .imgIcon{
        width: 100px;
        height: 100px;
        margin-bottom: 10px;
      }
    </style>
    <script>
      const baseUrl = "http://localhost:8080/StuManager/"
      // ajax  action=getUser
      $(function (){
        axios.get(baseUrl+'LoginServlet?action=getUser')
            .then(function (response) {
              // handle success
              // response 是一个js对象, data是它的属性 data也是一个js对象
              console.log("axios success",response);
              let data = response.data;
              if (data.code === 20) {
                // 显示信息
                $(".error").html("")
                let userDesc = data.data;
                $(".name").html(userDesc.name)
                $(".email").val(userDesc.email)
                $(".sex").val(userDesc.sex)
                $(".imgIcon").attr("src", userDesc.icon)

              }else if (data.code === 30){
                $(".error").html(data.msg)
              }else if (data.code === 40){
              // 没有登录
                window.location = baseUrl+"StuManager"
              }
            })
            .catch(function (error) {
              // handle error
              console.log("axios fail", error);
            })
            .finally(function () {
              // always executed
              console.log("axios finally");
            });

        let isEdit = false;
        $(".edit").click(function (){
          if (!isEdit){
            isEdit = true;
            $(".edit").html("提交")
            // 将邮箱 性别 编程可编辑的状态
            $(".email").removeAttr("disabled")
            $(".sex").removeAttr("disabled")
          }else {
            // 提交的逻辑
            isEdit = false;
            $(".edit").html("编辑资料")
            $(".email").attr("disabled", true)
            $(".sex").attr("disabled", true)
            // 发送请求给服务器端, 修改用户资料
            axios.post(baseUrl+'LoginServlet?action=editUser',
                    "email="+$(".email").val()+"&sex="+$(".sex").val())
                    .then(function (response) {
                      // handle success
                      // response 是一个js对象, data是它的属性 data也是一个js对象
                      console.log("axios success",response);
                      let data = response.data;
                      if (data.code === 20) {
                        // 修改信息成功

                      }else if (data.code === 30){
                        $(".error").html(data.msg)
                      }else if (data.code === 40){
                        // 没有登录
                        window.location = baseUrl
                      }
                    })
          }
        })

        $('.imgIcon').on("error", function() {
          $(this).attr('src', '/StuManager/static/error.jpg');  // 替换为默认图片
        });
      })
    </script>
  </head>
  <body>
  <h1> 首页</h1>

  <div class="error"></div>
  <div>用户  <span class="name"></span></div>
  <div>邮箱  <input class="email" type="text" disabled/></div>
  <div>性别  <input class="sex" type="text" disabled/></div>
  <br/> <br/>


  <div class="icon"> <img  class="imgIcon"/></div>
  <form method="post" enctype="multipart/form-data"
        action="http://localhost:8080/StuManager/login/UploadServlet">
    <input type="file" name="fileName"/>
    <input type="submit" value="上传图片">
  </form>
  <br/> <br/>

  <button class="edit">编辑资料</button>
  <button class="manager"><a href="http://localhost:8080/StuManager/manageStu.jsp">管理学生</a></button>

  </body>
</html>
